
/*common scheme*/
.cell-with-background,
.cell-with-background .background-inherit,
/*hack to increase selectivity*/
.cell-with-background.btn,
.cell-with-background.form-control,
.cell-with-background.form-control .background-inherit,
.cell-with-background > .form-control,
.cell-with-background > .form-control .background-inherit,
.cell-with-background.prop-input-w-toolbar .background-inherit {
    background-color: var(--bs-table-bg);
}
/* background won't work for the input checkbox so we outline it with that color */
input.cell-with-background[type=checkbox] {
    outline: var(--bs-table-bg) solid 5px;
}

.form-control,
.form-control .background-inherit,
.prop-input-w-toolbar .background-inherit { /* need this because toolbar is shown over form-control, but it is its sibling and not its child, assert that there is form-control inside */
    background: var(--component-background-color);
}

.form-control {
    border: 1px solid var(--component-border-color); /* should correspond to the result in ActionOrPropertyValue.setBaseSize */
    border-radius: var(--textfield-border-radius);
}

.panel-renderer-value-focused:not(.panel-renderer-value-edited).form-control,
.panel-renderer-value-focused:not(.panel-renderer-value-edited).form-control .background-inherit,
.panel-renderer-value-focused:not(.panel-renderer-value-edited) > .form-control,
.panel-renderer-value-focused:not(.panel-renderer-value-edited) > .form-control .background-inherit,
.panel-renderer-value-focused:not(.panel-renderer-value-edited).prop-input-w-toolbar .background-inherit {
    background-color: var(--selection-color);
}

.panel-renderer-value-binding,
.panel-renderer-value-binding .background-inherit,
.panel-renderer-value-binding.btn,
.panel-renderer-value-binding.btn .background-inherit,
.panel-renderer-value-binding.form-control,
.panel-renderer-value-binding.form-control .background-inherit,
.panel-renderer-value-binding > .form-control,
.panel-renderer-value-binding > .form-control .background-inherit,
.panel-renderer-value-binding.prop-input-w-toolbar .background-inherit {
    background-color: var(--button-active-background-color);
}

.panel-renderer-value-focused.form-control,
.panel-renderer-value-focused > .form-control {
    border: 1px solid var(--focus-color);
}

.panel-renderer-value:not(.panel-renderer-value-focused).form-control:hover, /* we want focus to have higher priority than hover*/
.panel-renderer-value:not(.panel-renderer-value-focused) > .form-control:hover {
    border: 1px solid var(--component-hover-border-color);
}

/* border doesn't work for input checkbox */
input[type=checkbox].form-control.panel-renderer-value-focused,
.panel-renderer-value-focused input[type=checkbox].form-control {
    outline: 1px solid var(--focus-color);

    /* this is needed because Chrome has the default outline-offset set to 2 for :focus-visible input checkbox  */
    /* https://stackoverflow.com/questions/73049600/should-input-checkbox-outline-include-margins-or-not */
    outline-offset: 0;
}
input[type=checkbox].form-control.panel-renderer-value:not(.panel-renderer-value-focused):hover, /* we want focus to have higher priority than hover*/
.panelRendererValue:not(.panel-renderer-value-focused) input[type=checkbox].form-control:hover {
    outline: 1px solid var(--component-hover-border-color);
}

a.panel-renderer-value {
    text-decoration: underline;
}